<template>
<div class="magnifying">
        <div class="ma-right">
            <div class="ma-smPic" id="ma-smPic"  @mouseover="handleOver()"  @mouseout="handleOut()"  @mousemove="handleMove($event)" >
                <img v-if="images" :src="bigImg==''?URL.PIC+images[0].imageURL:bigImg"/>
                <div class="ma-moveBox" :class="{ active: showMoveBox }" :style="{ left: left+'px', top: top+'px'}"></div>
                <div class="ma-tips">点击放大图片</div>
            </div>
            <div class="ma-bigPic" id="ma-bigPic"  :class="{ active: bigPicBox }">
                <img  v-if="images" :src="bigImg==''?URL.PIC+images[0].imageURL:bigImg"  :style="{ left: imgLeft+'px', top: imgTop+'px'}" />
            </div>
        </div>
         <div class="pd-detail-scroll">
                <ul>
                  <li v-for="(item,i) in images" :class="active == i?'per-detail-pic active':'per-detail-pic'" @mouseenter="changeImage(URL.PIC+item.imageURL, i)">
                     <img :src="URL.PIC+item.imageURL" height="50px" width="50px" :data-smPic="URL.PIC+item.imageURL" :data-bigPic="URL.PIC+item.imageURL"/>
                  </li>
                </ul>
        </div>
</div>
</template>
<script>
    export default {
        props: ['images'],
        name: 'ProductZoomer',
        components: {},
        data() {
            return {
                bigImg: '',
                showMoveBox: false,
                bigPicBox:false,
                left:0,
                top:0,
                imgLeft:0,
                imgTop:0,
                isActive:false,
            }
        },
        beforeRouteLeave(to, from, next) {
            this.setTitle(this.URL.YHTitle)
            this.routeToPath(to.fullPath, 'current')
        },
        created() {
            this.getDom();
            this.bindEvent();
        },
        methods: {
            //点击图片
            changeImage(val, index) {
                this.bigImg = val;
                this.active = index;
            },
            getDom: function () {

            },
            handleOver() {
                this.showMoveBox = true;
                this.bigPicBox = true;
            },
            handleOut() {
                this.showMoveBox = false;
                this.bigPicBox = false;
            },
            handleMove(e) {
                let self = document.querySelector(".ma-moveBox");

                let smPic = document.getElementById("ma-smPic").offsetParent;

                var posX=e.pageX-smPic.offsetLeft-self.offsetWidth/2;
                var posY=e.pageY-smPic.offsetTop-self.offsetHeight/2;
                var maxW=document.getElementById('ma-smPic').offsetWidth-self.offsetWidth;
                var maxH=document.getElementById('ma-smPic').offsetHeight-self.offsetHeight;

                if(posX<0){
                        posX=0;
                }else if(posX>maxW){
                        posX=maxW;
                }

                if(posY<0){
                        posY=0;
                }else if(posY>maxH){
                        posY=maxH;
                }

                this.left = posX;
                this.top = posY;

                var scaleX=posX/maxW;
                var scaleY=posY/maxH;

                let oMaBigpic = document.getElementById("ma-bigPic");

                var w=oMaBigpic.firstChild.offsetWidth-oMaBigpic.offsetWidth;
                var h=oMaBigpic.firstChild.offsetHeight-oMaBigpic.offsetHeight;

                this.imgLeft = -w*scaleX;
                this.imgTop = -h*scaleY;
            },
            bindEvent: function () {

            }
        }
    }
</script>

<style lang="scss" scoped>

    .magnifying{ width:380px; height:380px;clear: both;}

    .ma-left{width:380px; height:56px;margin-top: 20px;}
    .ma-scroll-wrap{margin-left: 15px;}

    .ma-upBtn{float: left;width: 30px;height: 56px;line-height: 45px;} .ma-downBtn{float: left;width: 30px;height: 56px;line-height: 45px;}

    .maUpBtn,.maDownBtn{
        font-size: 0;
        line-height: 0;
        border-width: 10px;
        border-color: #000;
        border-left-width: 0;
        border-style: dashed;
        border-right-style: solid;
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    .maDownBtn{
        font-size: 0;
        line-height: 0;
        border-width: 10px;
        border-color: #000;
        border-right-width: 0;
        border-style: dashed;
        border-left-style: solid;
        border-top-color: transparent;
        border-bottom-color: transparent;
    }

    .pd-detail-scroll{
        width: 360px;
        // height: 80px;
        margin: 15px auto;
        text-align: center;
        .per-detail-pic{
            display: inline-block;
            width: 50px;
            height: 50px;
            cursor: pointer;
            // background: #eee;
            // margin: 15px 5px 0;
            padding: 5px;
            border: 1px solid #fff;
        }
        .per-detail-pic.active{
            border: 1px solid #255B8B;
        }
    }

    .ma-right{width:380px; height:380px; position:relative;}
    .ma-smPic{ width:380px; height:380px;osition:relative;}
    .ma-smPic img{ width:380px; height:380px; display:block;}
    .ma-moveBox{ width:160px; height:160px; background-color:#fff; opacity:.7; filter:alpha(opacity=70); position:absolute; border:1px solid #eee; display:none;}
    .ma-moveBox{
       &.active{display: block;}
    }
    .ma-tips{ width:85px; height:24px; line-height:24px; text-align:center; background-color:#fff; opacity:.7; position:absolute; z-index:99; border:1px solid #eee; display:none;}

    .ma-bigPic{ width:450px; border:1px solid #EEEEEE; background: #FFFFFF; height:500px;position:absolute; top:0; left:381px; overflow:hidden; display:none;z-index:9999; &.active{display: block;}}
    .ma-bigPic img{ position:relative;}



</style>